class Slider {
  constructor(id, w, h ) {
    //id 轮播区域的id
    //w 轮播区域的宽 h 轮播区域的高
    this.sliderBox = document.getElementById(id); //轮播区域
    this.sliderBox.style.width = w + "px";
    this.sliderBox.style.height = h + "px";
    this.sliderUl = this.sliderBox.children[0]; //轮播列表ul
    this.sliderList = this.sliderUl.children; //轮播列表li
    this.len = this.sliderList.length; // 轮播列表li的个数
    this.sliderImg = this.sliderUl.getElementsByTagName("img"); //轮播图片img
    this.timer = null; //定时器
    this.i = 0; //对应第几个区块展示
    //设定ul，img 的宽度
    this.perWidth = w; //单位宽
    this.sliderUl.style.width = this.perWidth * this.len + "px"; //轮播列表ul的宽度
    for (let i = 0; i < this.sliderImg.length; i++) {
      this.sliderImg[i].style.width = w + "px";
      this.sliderImg[i].style.height = h + "px";
    }
    //默认就要轮播
    this.autoPlay();
    //默认鼠标移入移出就应清开定时器
    this.clear_set();
  }
  move() {
    this.i++;
    //123123
    if (this.i == this.len) {
      this.sliderUl.style.left = 0;
      this.i = 1;
    }
    //321321
    if (this.i == -1) {
      this.sliderUl.style.left = -this.perWidth * (this.len - 1) + "px";
      this.i = this.len - 2;
    }
    //小圆点处理
    if (this.focusList) {
      for (let i = 0; i < this.focusList.length; i++) {
        this.focusList[i].className = "";
      }
      if (this.i == this.len - 1) {
        this.focusList[0].className = "hover"
      } else {
        this.focusList[this.i].className = "hover"
      }
    }
    startMove(this.sliderUl, {
      left: -this.i * this.perWidth
    });
  }
  autoPlay() {
    this.timer = setInterval(() => {
      this.move();
    }, 3000)
  }
  //添加按钮
  addArr() {
    //创建结构 扔到sliderBox里
    let oDiv = document.createElement("div");
    oDiv.className = "arrow";
    this.sliderBox.appendChild(oDiv);
    oDiv.innerHTML = " <span>&lt;</span><span>&gt;</span>";
    let aArr = oDiv.children; //取到箭头
    aArr[0].onclick = () => {
      this.i -= 2;
      this.move();
    }
    aArr[1].onclick = () => {
      this.move();
    }
  }
  //添加圆点
  addFocus() {
    let oUl = document.createElement("ul");
    oUl.className = "focus";
    this.sliderBox.appendChild(oUl);
    for (let i = 0; i < this.len - 1; i++) {
      let oLi = document.createElement("li");
      oLi.innerText = i + 1;
      oUl.appendChild(oLi);
    }
    this.focusList = oUl.children;
    this.focusList[0].className = "hover";

    for (let j = 0; j < this.focusList.length; j++) {
      this.focusList[j].onclick = () => {
        this.i = j - 1;
        this.move();
      }
    }

  }
  //清开定时器
  clear_set() {
    this.sliderBox.onmouseover = () => {
      clearInterval(this.timer);
    }
    this.sliderBox.onmouseout = () => {
      this.timer = setInterval(() => {
        this.move();
      }, 3000)
    }
  }
}